@import "~scss/variables";

.sw-settings-index {
    &__card-view {
        background-color: var(--color-elevation-surface-default);

        /**
        * @deprecated tag:v6.8.0 - Will be removed
        */
        .sw-settings__content-rename-banner {
            margin: -16px auto 32px;
            align-items: center;
        }
    }

    .sw-settings__card--hero {
        container-type: inline-size;
        color: var(--color-text-primary-default, #2d2e32);
        background: transparent;
        border: none;

        h1,
        h2 {
            color: var(--color-text-primary-default, #2d2e32);
            font-weight: 700;
        }

        h2 {
            line-height: 145%;
            font-size: 16px;
            margin-bottom: 12px;
        }

        h1 {
            line-height: 140%;
            font-size: 24px;
        }

        .sw-settings__content-header {
            text-align: left;
            margin-bottom: 48px;
        }

        .sw-settings__content-grid {
            columns: 3;
            text-align: left;
            column-gap: 64px;
            max-width: 960px;

            @container (max-width: 940px) {
                columns: 2;
            }

            @container (max-width: 500px) {
                columns: 1;
            }
        }

        .sw-settings__content-group {
            break-inside: avoid;
            height: fit-content;
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding-bottom: 48px;

            @container (max-width: 500px) {
                padding-bottom: 32px;
            }
        }
    }
}
